<template>
	<view class="page">
		<u-navbar title="修改密码" title-color="#000000" back-icon-color="#000000" :background="background"></u-navbar>
		<view class="top">
			<view class="money-ke flex-row items-center">
				<view class="money-ke-lf flex-row items-center justify-center">
					<image class="shrink-0 money-ke-lf-img mt-8"
						src="https://terminator.axu9.com/images/huoke-balance-icon2.png" />
				</view>
				<view class="money-ke-rg flex-row flex-1 items-center">
					<text class="money-ke-rg-text mr-20">手机号</text>
					<input type="text" v-model="phoneNumber" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="money-ke flex-row items-center">
				<view class="money-ke-lf flex-row items-center justify-center">
					<image class="shrink-0 money-ke-lf-img mt-8"
						src="https://terminator.axu9.com/images/huoke-balance-icon2.png" />
				</view>
				<view class="money-ke-rg flex-row flex-1 items-center">
					<text class="money-ke-rg-text mr-20">验证码</text>
					<!-- <text class="money-ke-rg-text">{{balance}}元</text> -->
					<input type="text" v-model="verCode" placeholder="请输入验证码" />
					<text @click="sendCode">{{ intervalTime > 0 ? '重新获取('+ intervalTime + ' s)' : '获取验证码' }}</text>
				</view>
			</view>
			<view class="money-ke flex-row items-center">
				<view class="money-ke-lf flex-row items-center justify-center">
					<image class="shrink-0 money-ke-lf-img1 mt-8"
						src="https://terminator.axu9.com/images/huoke-balance-icon1.png" />
				</view>
				<view class="money-ke-rg flex-row flex-1 items-center">
					<text class="money-ke-rg-text mr-20">密&nbsp;&nbsp;&nbsp;码</text>
					<u-input class="input-class" :clearable="false" v-model="password" placeholder="请输入密码"
						type="password" :border="false" />
				</view>
			</view>
			
		</view>
		<view @click="verChangePWd" class="withdraw-btn" v-if="!isLoadding">
			立即修改
		</view>
		<view class="withdraw-btn" v-if="isLoadding">
			立即修改
		</view>

	</view>
</template>

<script>
	import {
		sendmobilecode,
		updatePasswordApp
	} from "@/api/user.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				verCode: '', //验证码
				isLoadding: false,
				phoneNumber: '', //手机号
				password: '', //密码
				timer: null, // 用于倒计时
				intervalTime: 0, // 倒计时时间（秒）
				isSending: false // 防止重复点击
			}
		},
		onLoad() {
			
		},
		methods: {
			// 发送验证码
			sendCode() {
				if (!this.phoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return;
				}
				if (this.isSending) {
					uni.showToast({
						title: '验证码发送中，请稍候...',
						icon: 'none'
					})
					return;
				}

				// 禁用按钮并启动倒计时
				this.isSending = true;
				this.startCountdown();

				// 调用后端接口发送验证码
				sendmobilecode({
					mobile: this.phoneNumber,
					type: 1
				}).then(res => {
					if (res.errno == 0) {
						uni.showToast({
							title: '验证码发送成功'
						})

					} else {
						uni.showToast({
							title: '验证码发送失败：' + res.msg,
							icon: 'none'
						})
						// 如果发送失败，需要重置倒计时和按钮状态
						this.resetCountdown();
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败，请检查网络',
						icon: 'none'
					})

					this.resetCountdown();
				})

			},
			// 开始倒计时
			startCountdown() {
				this.intervalTime = 60;
				this.timer = setInterval(() => {
					this.intervalTime--;
					if (this.intervalTime <= 0) {
						this.resetCountdown();
					}
				}, 1000);
			},
			// 重新倒计时
			resetCountdown() {
				clearInterval(this.timer);
				this.intervalTime = 60;
				this.isSending = false;
			},
			// 修改密码
			changePwd() {
				if (this.isLoadding) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				this.isLoadding = true;
				updatePasswordApp({
					code: this.verCode,
					mobile: this.phoneNumber,
					password: this.password
				}).then(res => {

					if (res.errno == 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.isLoadding = false
							uni.redirectTo({
								url: '/pages/login/index'
							})
						}, 1000)

					} else {
						this.isLoadding = false
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					this.isLoadding = false
					uni.showToast({
						title: '修改失败',
						icon: 'none'
					})
				})
			},
			// 提交校验
			verChangePWd() {
				if (!this.phoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return;
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return;
				}
				if(!this.verCode){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return;
				}
				this.changePwd();

			},
			// 获取提现记录
			getWithdrawalLog() {
				withdrawalLog({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					if (res.errno == 0) {
						this.list = res.data;
					}
				})
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'getUserinfo')
					this.balance = res.data.balance;
				}).catch(err => {

				})
			},
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);

	page {
		width: 100%;
		background-image: linear-gradient(-181deg, #d6f4ed, #ebfaf6);
		background-size: 100% 480rpx;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}




	.line {
		width: 100%;
		height: 2rpx;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}

	.top {
		width: 690rpx;
		/* height: 303rpx; */
		border-radius: 12rpx;
		background: #ffffff;
		margin: 0 auto;
		padding: 29rpx 68rpx 59rpx 36rpx;
		margin-top: 60rpx;
	}

	.money-ke {
		height: 118rpx;
		/* line-height: 118rpx; */
	}

	.mt-8 {
		margin-top: 8rpx;
	}

	.money-ke-rg {
		width: 100%;
		height: 100%;
		border-bottom: 1rpx solid #dddfe3;
	}

	.money-ke-rg-text {
		color: #000000;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 30rpx;
		width: 120rpx;
	}

	.mr-20 {
		margin-right: 20rpx;
	}

	.input-class {
		width: 100%;
		color: #000000;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 30rpx;
	}

	.placeholder-class {
		font-weight: 500;
		font-size: 30rpx;
		color: #98A0A9;
	}

	.money-ke-lf-img {
		width: 38rpx;
		height: 32rpx;
		margin-right: 17rpx;
	}

	.money-ke-lf-img1 {
		width: 37rpx;
		height: 36rpx;
		margin-right: 17rpx;
	}

	.withdraw-btn {
		width: 670rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #00ccbb, #00e586);
		box-shadow: 0 22rpx 50rpx 0 #00bf903b;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 27rpx;
		/* margin-bottom: 52rpx; */
		margin-bottom: 27rpx;
	}

	.withdraw-recard-text {
		font-weight: 500;
		font-size: 26rpx;
		color: #98A0A9;
		margin-bottom: 52rpx;
	}

	.list-item {
		width: 690rpx;
		padding: 26rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-top: 23rpx;
	}

	.lf-img {
		width: 37rpx;
		height: 36rpx;
		margin-right: 17rpx;
		margin-top: 8rpx;
	}

	.list-top-lf {
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
	}

	.list-top-rg {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
	}

	.list-bottom-text {
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
		max-width: 90%;
	}

	.list-bottom-rg {
		font-weight: 400;
		font-size: 28rpx;
		color: #00BF90;
		width: 100%;
		word-break: break-all;
	}

	.list-bottom-rg-mobile {
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
	}

	.tixian-ing {
		font-weight: 500;
		font-size: 30rpx;
		color: #00BF90;
	}

	.tixian-ed {
		font-weight: 500;
		font-size: 30rpx;
		color: #FF9908;
	}

	.tixian-fail {
		font-weight: 500;
		font-size: 30rpx;
		color: #da4800;
	}
</style>